<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>灯组控制</title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			
			.light>div{
				display: flex;
				justify-content: center;
				align-items: center;
				float: left;
				box-sizing: border-box;
				border: 1px solid #ccc;
				transition: 1s;
				
			}
			.light .active{
				background:#f00;
			}
			p{
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<div class="light" >
			
		</div>
		<p>灯组控制：手指滑动到哪个灯，哪个灯就亮，2s后灯关闭</p>
		<script type="text/javascript">
			// 灯
			class Light{
				constructor(opt) {
					this.options = {
						time:2000,
						text:''
					}
					this.options = Object.assign({},this.options,opt)
					// 时间
				    this.time = this.options.time
					// 定时器
					this.timer = null;
					// 元素宽度
					this.width = 0;
					// 灯的开关状态
					this.lightSwitch = false;
				}
				create(text){
					this.dom = document.createElement('div')
					this.dom.innerText = text;
					return this.dom;
				}
				setWidth(num){
					this.width = num;
				}
				setStyle(style){
					this.dom.setAttribute('style',style)
				}
				// 关灯
				offLight(){
					this.dom.classList.remove('active')
				}
				// 开灯
				onLight(){
					this.lightSwitch = true;
					this.timer && clearTimeout(this.timer)
					this.dom.classList.add('active')
					// 自动延迟关灯
					this.timer = setTimeout(()=>{
						this.lightSwitch = false;
						this.offLight()
					},this.time)
				}
			}
			// 场景
			class Screen{
				constructor(opt) {
					this.options = {
						num:100,
						colNum:5,
						space:10
					}
					this.options = Object.assign({},this.options,opt)
				    this.lightBox = document.querySelector('.light');
					
				    // 窗口宽度
				    this.winW = window.innerWidth;
					// 灯的数量
					this.ligthNum = this.options.num
				    // 列数
				    this.colNum = this.options.colNum;
				    // 间距
				    this.space = this.options.space;
				    // 灯的数组
				    this.lightArr = [];
					// 设置右侧间距
					this.lightBox.style.marginRight=this.space*-1+"px"
					this.createDom()
					this.bindEvent()
				}
				calcStyle(){
					return (this.winW-(this.colNum-1)*this.space)/this.colNum
				}
				createDom(){
					let styleAttr = this.calcStyle();
					for(var i=0;i<this.ligthNum;i++){
						// 实例化灯对象
						var obj = new Light()
						// 创建dom
						var el = obj.create(i+1)
						obj.setWidth(this.calcStyle())
						var width = this.calcStyle()
						obj.setStyle(`width:${width}px;height:${width}px;margin-right:${this.space}px;margin-bottom:${this.space}px`)
						// 对象插入到数组中
						this.lightArr.push(obj)
						// 插入dom
						this.lightBox.appendChild(el)
					}
				}
				bindEvent(){
					document.addEventListener('touchstart',this.moveFn.bind(this))
					document.addEventListener('touchmove',this.moveFn.bind(this))
					document.addEventListener('touchend',(e)=>{
						// console.log(e)
						document.removeEventListener('touchstart',this.moveFn)
						document.removeEventListener('touchmove',this.moveFn)
					})
				}
				moveFn(e){
					e.preventDefault();
					var touchs = e.changedTouches[0]
					var x = touchs.pageX;
					var y= touchs.pageY;
					this.collision(x,y)
				}
				collision(x,y){
					var len = this.lightArr.length;
					for (var i = 0; i < len; i++) {
						var item = this.lightArr[i];
						var width = item.width;
						var left = item.dom.offsetLeft;
						var top = item.dom.offsetTop;
						var right = left+width;
						var bottom = top+width;
						if(x>left && x<right && y>top && y<bottom){
							item.onLight()
						}
					}
				}
			}
			
			new Screen({num:100,colNum:10,space:5})
		</script>
	</body>
</html>
